<template>
    <div id="mon">
        <div class="din">
            <p>订单号：<span>{{list.order_number}}</span></p>
            <p class="p">应付金额：<font>{{list.order_price | toFixPrice}}</font>
            </p>
        </div>
        <div class="but">
            <p>实付价格：<span>{{list.order_price | toFixPrice}}</span></p>
            <button @click="ti">提交订单</button>
        </div>
    </div>
</template>
<script>
import { shoporder } from '@/api/user.js'
export default {
  data() {
    return {
      id: this.$route.query.id,
      list: []
    }
  },
  methods: {
    async girlist() {
      let { data: data } = await shoporder({ order_id: this.id })
      this.list = data.data
      console.log(this.list, 8)
    },
    ti() {
      this.$toast('请选择支付方式')
    }
  },
  created() {
    this.girlist()
  }
}
</script>
<style lang="scss" scoped>
#mon {
  background: #f7f8fa;
  height: 100%;
}
.din {
  margin: 15px 10px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  border-radius: 10px;
  p {
    margin: 5px 0;
    font-size: 14px;
  }
  .p {
    font-size: 18px;
  }
}
.but {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 2px 5px 0px #ccc;
  p {
    font-size: 14px;
    span {
      color: #e02020;
    }
  }
  button {
    width: 110px;
    height: 35px;
    border-radius: 25px;
    border: none;
    background: #e60012;
    color: white;
    margin: 0 15px;
    font-size: 14px;
  }
}
</style>


